<!--连接管理页面-->
<template>
  <el-row align="middle" type="flex" style="flex-wrap: wrap">
    <el-col :lg="{ span:6 }" v-for="(item) in connectionList" :key="item.connectionId" :offset="0" class="card-col-wb">

      <el-card @click.native="handleAddConnection" shadow="hover" class="card-add-btn" v-if="item['root'] !== undefined">
        <i class="el-icon-folder-add"></i>
      </el-card>

      <el-card @dblclick.native="doubleClick(item)" class="box-card" v-else>
        <div slot="header" class="clearfix" style="">
          <i class="el-icon-edit" style="cursor: pointer" @click="handleEditConnection(item)">编辑</i>
          <i class="el-icon-delete" style="cursor: pointer" @click="handleDeleteConnection(item)">删除</i>
          <i class="el-icon-cpu" style="cursor: pointer" @click="handleGenerateData(item)">数据生成</i>
        </div>
        <div>
          <span class="word">
            <span class="word-label">{{ '名称: ' }}</span>
            <span class="word-weight">{{ item.name }}</span>
            <i class="el-icon-copy-document word-copy-btn" title="点击复制" @click="copyText($event, item.name)"/>
          </span>
          <span class="word">
            <span class="word-label">{{ '用户名: ' }}</span>
            <span class="word-weight">{{ item.username }}</span>
            <i class="el-icon-copy-document word-copy-btn" title="点击复制" @click="copyText($event, item.username)"/>
          </span>
          <span class="word">
            <span class="word-label">{{ 'URL: ' }}</span>
            <span class="word-weight" :title="item.url">{{ item.url }}</span>
            <i class="el-icon-copy-document word-copy-btn" title="点击复制" @click="copyText($event, item.url)"/>
          </span>
        </div>
      </el-card>
    </el-col>

    <data-source-insert-and-update :dialogFormVisible="connectFormVisible" :cancel="handleConnectFormCancel"
                                   :form="connectForm"
                                   :listRefresh="refresh" :connectTitle="connectTitle"/>
  </el-row>

</template>

<script>
import DataSourceInsertAndUpdate from "@/views/connection-manager/ConnectionInsertAndUpdate.vue";
import Clipboard from 'clipboard'
import {deleteConnection, listConnection} from "@/api/connection-manager/ConnectionManager";

export default {
  name: "DataSourceManager",
  props: {
    addManageTab: Function,
  },
  components: {
    DataSourceInsertAndUpdate: DataSourceInsertAndUpdate,
  },
  data() {
    return {
      connectionList: [{root: '添加'}],
      root: {root: '添加'},
      connectFormVisible: false,
      connectForm: {
        connectionId: 0,
        name: '',
        url: '',
        username: '',
        password: '',
      },
      connectTitle: '新增连接',
    }
  },
  methods: {
    getConnectionList() {
      const that = this;
      listConnection().then(res => {
        let data = res.data;
        data.push(this.root);
        that.connectionList = data;
      })
    },
    refresh() {
      this.getConnectionList();
    },
    handleConnectFormCancel() {
      this.connectFormVisible = false;
      this.connectForm = {connectionId: 0, name: '', url: '', username: '', password: ''};
    },
    //新增连接
    handleAddConnection() {
      this.connectTitle = '新增实例';
      // form 重置
      this.connectForm = {connectionId: 0, name: '', url: '', username: '', password: ''};
      this.connectFormVisible = true;
    },
    //编辑连接
    handleEditConnection(item) {
      this.connectTitle = '编辑实例';
      this.connectForm = {
        connectionId: item.connectionId,
        name: item.name,
        url: item.url,
        username: item.username,
        password: item.password,
      };
      this.connectFormVisible = true;
    },
    //删除连接
    handleDeleteConnection(item) {
      const that = this;
      this.$confirm('此操作将永久删除该实例，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteConnection(item.connectionId).then(res => {
          if (res.code === 200) {
            that.$notify({
              title: '消息',
              message: '连接删除成功',
              type: 'success'
            });
            that.refresh();
          } else if (res.code === 400) {
            that.$notify({
              title: '消息',
              message: '数据库中未不存在此连接',
              type: 'waring'
            });
            that.refresh();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //数据生成
    handleGenerateData(item) {
      this.addManageTab(item);
    },


    doubleClick(item) {
      this.addManageTab(item);
    },

    copyText(e, text) {
      const clipboard = new Clipboard(e.target, {text: () => text})
      clipboard.on('success', () => {
        this.$message({type: 'success', message: '复制成功'})
        // 释放内存
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        // 不支持复制
        this.$message({type: 'waning', message: '该浏览器不支持自动复制'})
        // 释放内存
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
      })
      clipboard.onClick(e)
    }
  },
  mounted() {
    this.getConnectionList();
  }

}
</script>

<style scoped>

.clearfix {
  display: flex;
  justify-content: space-between;
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 400px;
}

.card-col-wb {
  justify-content: center;
  align-items: center;
  display: flex;
  text-align: initial;
  margin-top: 20px;
}

.card-add-btn {
  width: 400px;
  height: 250px;
  text-align: center;
  font-weight: bold;
  font-size: 100px;
  cursor: pointer;

  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.word {
  display: block;
  padding: 8px;
  color: rgba(22, 24, 35, 0.5);
  width: 100%;
}

.word-weight {
  text-align: left;
  color: rgba(22, 24, 35, 0.5);
  display: inline-block;
  width: 65%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(46, 50, 56, 0.05);
  height: 30px;
  line-height: 30px;
  padding-left: 4%; /* 在左边留出 10px 的空白 */

}


.word-label {
  display: inline-block;
  width: 20%;
  height: 30px;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.word-copy-btn {
  position: relative;
  float: right;
  font-size: 20px;
  margin-top: 5px;
  cursor: pointer; /* 鼠标悬停时变成小手 */

}
</style>